<template>
	<view>
		<!-- <text>句子</text> -->
		<video id="myVideo"
			src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-b945bf10-9792-40a0-b84e-8011ea9a8bb2/b83e0626-1ae8-4991-b1c7-eb8b995725cf.mp4"
			object-fit="cover" page-gesture="true" style="height: 1400rpx;width: 750rpx" @error="videoErrorCallback"
			autoplay="true" loop :controls="false"></video>
		<view class="mytext">
			<view class="left"> 『</view>
			<view class="word">{{res.hitokoto}}</view>
			<view class="right"> 』</view>
			<view class="author"> {{res.from!=null?res.from:""}} {{res.from_who!=null?res.from_who:""}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getHitokoto
	} from '../../../api/sentence.js'
	export default {
		data() {
			return {
				res:{
					hitokoto:"你在期待什么呢？等不到就下次来吧！",
					from:"",
					from_who:"",
				},
				
			}
		},
		onLoad() {
			getHitokoto().then(res => {
				this.res = res
				console.log(res)
			})
		},
		methods: {
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style>
	.mytext {
		position: absolute;
		width: 100%;
		color: #FFFFFF;
		bottom: 40%;
		left: 0rpx;
		line-height: 2.6rem !important;
		font-size: 2.3rem;
	}

	.word {
		margin: 30rpx;
		padding: 15px 50px;
		text-align: center;
	}

	.author {
		
		text-align: center;
		font-size: 1.3rem;
	}

	.left {
		position: relative;

	}

	.right {
		position: relative;
		left: 90%;
	}
</style>
